<template>
  <div class="container-fluid">
    <div class="row school-model school-tiao">
      <div class="col school-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col text-right">
        <a-button-group>
          <a-button type="primary">
            <router-link class="text-white" :to="{name: '课后作业'}">返回</router-link>
          </a-button>
        </a-button-group>
      </div>
    </div>
    <div class="row school-model index-model">
      <el-container>
        <el-aside class="border-right" width="200px">
          <h6 class="school-h6">
            <router-link :to="{name: '布置作业详情'}">{{homework.title}}</router-link>
          </h6>
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>未提交{{未提交}}人</span>
              </template>
              <el-submenu
                v-for="(v, i) in options"
                :key="`1jobsubmission${i}`"
                :index="`2jobsubmission${i}`"
              >
                <template slot="title">{{v.name}}</template>
                <el-menu-item
                  v-for="(vo,iz ) in schoolstudentschoolclazz"
                  :key="`3jobsubmission${i}${iz}`"
                  v-show="['未接收', '未提交'].includes(vo.type) && vo.clazzs.includes(v.ID)"
                  disabled
                >{{vo.name}}</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>待点评{{待点评}}人</span>
              </template>
              <el-submenu
                v-for="(v, i) in options"
                :key="`4jobsubmission${i}`"
                :index="`5jobsubmission${i}`"
              >
                <template slot="title">{{v.name}}</template>
                <el-menu-item
                  v-for="(vo,iz ) in schoolstudentschoolclazz"
                  :key="`6jobsubmission${i}${iz}`"
                  v-show=" '已提交'== vo.type && vo.clazzs.includes(v.ID)"
                  @click="rot(vo.ID)"
                >{{vo.name}}</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>已点评{{已点评}}人</span>
              </template>
              <el-submenu
                v-for="(v, i) in options"
                :key="`7jobsubmission${i}`"
                :index="`8jobsubmission${i}`"
              >
                <template slot="title">{{v.name}}</template>
                <el-menu-item
                  v-for="(vo,iz ) in schoolstudentschoolclazz"
                  :key="`9jobsubmission${i}${iz}`"
                  v-show=" '已点评'== vo.type && vo.clazzs.includes(v.ID)"
                  @click="rot(vo.ID)"
                >{{vo.name}}</el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>
        </el-aside>
        <router-view></router-view>
      </el-container>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "jobsubmission",
  data() {
    return {
      未提交: 0,
      待点评: 0,
      已点评: 0
    };
  },
  props: ["ID"],
  watch: {
    $route() {
      this.auth();
    }
  },
  computed: {
    ...mapGetters(["getschoolstudent", "getschoolclazz", "getschoolhomework"]),
    homework() {
      return this.getschoolhomework.find(v => v.ID == this.ID);
    },
    options() {
      const { getschoolclazz, homework } = this;
      const { schoolclazzs } = homework;
      const clazz = getschoolclazz.filter(v =>
        schoolclazzs.split(",").includes(String(v.ID))
      );
      return clazz;
    },
    schoolstudentschoolclazz() {
      const { getschoolstudent, ID } = this;
      let 未提交 = 0;
      let 待点评 = 0;
      let 已点评 = 0;
      const data = getschoolstudent
        .filter(v => {
          const { schoolstudenthomework } = v;
          return schoolstudenthomework.find(v1 => v1.schoolhomeworkid == ID);
        })
        .map(v => {
          const { schoolstudentschoolclazz, schoolstudenthomework } = v;
          const clazzs = schoolstudentschoolclazz.map(vo => vo.schoolclazzid);
          const { type } = schoolstudenthomework.find(
            v1 => v1.schoolhomeworkid == ID
          );
          if (["未接收", "未提交", "已接收"].includes(type)) {
            未提交++;
          } else if (type === "已提交") {
            待点评++;
          } else {
            已点评++;
          }
          v.type = type;
          v.clazzs = clazzs;
          return v;
        });
      this.chan(未提交, 待点评, 已点评);
      return data;
    }
  },
  methods: {
    async rot(ID) {
      if (
        this.homework.schoolstudenthomework.find(v =>
          ["已提交", "已点评"].includes(v.type)
        )
      ) {
        this.$router.push({ name: "查看学生作业", params: { ids: ID } });
      }
    },
    auth() {},
    chan(未提交, 待点评, 已点评) {
      this.未提交 = 未提交;
      this.待点评 = 待点评;
      this.已点评 = 已点评;
    }
  }
};
</script>

<style lang="scss" scoped>
.index-model {
  margin-top: 13px;
}
.dialog-footer {
  text-align: center;
}
.school-h6 {
  line-height: 35px;
  padding-left: 40px;
}
</style>